import React, {Component} from 'react';
import {View, Modal, Text, TouchableOpacity, StyleSheet, DeviceInfo} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import TimeSpan from '../model/TimeSpan';

export const timeSpans = [new TimeSpan('今 天', 'daily'), new TimeSpan('本 周', 'weekly'), new TimeSpan('本 月', 'monthly')];

export default class TrendingDialog extends Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
  }

  show() {
    this.setState({
      visible: true
    })
  }

  dismiss() {
    this.setState({
      visible: false
    })
  }

  render() {
    const {onClose, onSelect} = this.props;
    return (
      <Modal
        transparent={true}
        visible={this.state.visible}
        onRequestClose={() => onClose}
      >
        <TouchableOpacity
          style={styles.container}
          onPress={() => this.dismiss()}
        >
          <MaterialIcons
            name={'arrow-drop-up'}
            size={36}
            style={styles.arrow}
          />
          <View style={styles.content}>
            {timeSpans.map((result, index, arr) => {
              return (
                <TouchableOpacity
                  underlayColor={'transparent'}
                  onPress={() => onSelect(result)}
                  key={index}
                >
                  <View style={styles.textContainer}>
                    <Text style={styles.text}>
                      {result.showText}
                    </Text>
                  </View>
                  {index !== arr.length - 1 ? <View style={styles.line}/> : null}
                </TouchableOpacity>
              )
            })}
          </View>
        </TouchableOpacity>
      </Modal>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    flex: 1,
    alignItems: 'center',
    paddingTop: DeviceInfo.isIPhoneX_deprecated ? 30 : 0
  },
  arrow: {
    color: 'white',
    padding: 0,
    margin: -15,
    marginTop: 40
  },
  content: {
    backgroundColor: 'white',
    borderRadius: 3,
    paddingTop: 3,
    paddingBottom: 3,
    marginRight: 3
  },
  textContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  text: {
    fontSize: 16,
    fontWeight: '400',
    color: 'black',
    padding: 8,
    paddingLeft: 26,
    paddingRight: 26
  },
  line: {
    height: 0.3,
    backgroundColor: '#888'
  }
});